<%@page import="com.cqeec.myblog.model.DataDictionary"%>
<%@page import="java.util.List"%>
<%@page import="com.cqeec.myblog.model.Article"%>
<%@ page import="com.cqeec.myblog.service.ArticleServiceImpl"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="include/resources.jsp"%>
<title>我的博客</title>
</head>
<body>
	<div class="container-fluid">
		<%@include file="include/header.jsp"%>
		<br />
		<div class="row">
			<div class="col-2"></div>
			<div class="col-8" style="font-size: 20px;">
				<%
					String type = (String) request.getAttribute("type");
					List<DataDictionary> tdList = null;
					Object obj = request.getAttribute("atList");
					if (obj != null) {
						tdList = (List<DataDictionary>) obj;
						for (DataDictionary dd : tdList) {
							if (dd.getId().equals(type)) {
				%>
				<a href="<%=contentPath%>/article/list.html?id=<%=dd.getId()%>"
					class="badge badge-success"><%=dd.getName()%></a>
				<%
					} else {
				%>
				<a href="<%=contentPath%>/article/list.html?id=<%=dd.getId()%>"
					class="badge badge-light"><%=dd.getName()%></a>
				<%
					}
						}
					}
				%>
				<a href="<%=contentPath%>/article/index.html"
					class="badge badge-success">所有</a>
			</div>
			<div class="col-2"></div>
		</div>
		<div class="row">
			<div class="col-2"></div>
			<div class="col-8">
				<%-- 博文列表 --%>
				<%
					obj = request.getAttribute("list");
					if (obj == null && blogger == null) {
				%>
				<div>博主比较懒，暂无文章分享。</div>
				<%
					} else if (obj == null && blogger != null) {
				%>
				<div>比较懒哟！还不快点来写点东东......</div>
				<%
					}
				%>
				<%-- 创建博文 --%>
				<%
					if (blogger != null) {
				%>
				<br />
				<button class="btn btn-primary" data-toggle="modal"
					data-target="#articleTypeModal">文章分类管理</button>
				<div class="modal fade" id="articleTypeModal" tabindex="-1"
					role="dialog" aria-labelledby="exampleModalCenterTitle"
					aria-hidden="true">
					<div class="modal-dialog modal-dialog-centered modal-lg"
						role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="exampleModalCenterTitle">文章分类</h5>
								<button type="button" class="close" data-dismiss="modal"
									aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<form class="form-inline">
									<input type="text" class="form-control mb-2 mr-sm-2"
										name="articleType" id="articleType" placeholder="请输入文章分类">
									<button id="addArticleType" type="button"
										class="btn btn-primary mb-2">新增</button>
								</form>
								<table id="articleTypeTable" class="table table-hover">
									<thead>
										<tr>
											<th>序号</th>
											<th>名称</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<%
											if (tdList != null) {
													int row = 1;
													for (DataDictionary dd : tdList) {
										%>
										<tr>
											<td><%=row%></td>
											<td><%=dd.getName()%></td>
											<td><a id="<%=dd.getId()%>" class="btn btn-danger">
													<i class="far fa-trash-alt"></i>
											</a></td>
										</tr>
										<%
											row++;
													}
												}
										%>
									</tbody>
								</table>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary"
									data-dismiss="modal">返回</button>
							</div>
						</div>
					</div>
				</div>
				<a class="btn btn-primary"
					href="${contentPath}/app/article/management.html?m=create">创建文章</a> <br />
				<%
					}
				%>
				<%-- 输出10篇文章 --%>
				<%
					if (obj != null) {
						List<Article> list = (List<Article>) obj;
						for (Article a : list) {
				%>
				<br />
				<div class="card">
					<div class="card-body">
						<a href="" target="_blank">
							<h5 class="card-title"><%=a.getTitle()%></h5>
							<p class="card-text"><%=a.getContent()%></p>
						</a>
						<div style="margin-top: 10px;">
							<span class="align-middle" style="color: #ccc;">发布时间：<%=a.getCreationTime()%></span>
							<%
								if (blogger != null) {
							%>
							<a href="#" target="_blank" class="btn btn-danger float-right"
								style="margin-left: 10px;">删除文章</a> <a href="#" target="_blank"
								class="btn btn-info float-right" style="margin-left: 10px;">修改文章</a>
							<%
								}
							%>
							<a href="#" target="_blank" class="btn btn-primary float-right">阅读全文</a>
						</div>
					</div>
				</div>
				<%
					}
					}
				%>
			</div>
			<div class="col-2"></div>
		</div>
		<%
			if (obj != null) {
		%>
		<div class="row" style="padding-top: 50px;">
			<div class="col-2"></div>
			<div class="col-8">
				<nav aria-label="Page navigation">
					<ul class="pagination justify-content-center">
						<%
							int curPage = ((Integer) request.getAttribute("curPage")).intValue();
						%>
						<li class="page-item"><a class="page-link"
							href="<%=contentPath%>/article/index.html?page=<%=curPage == 1 ? 1 : curPage - 1%>">上一页</a></li>
						<%
							int pages = ((Integer) request.getAttribute("pages")).intValue();
								for (int i = 1; i <= pages; i++) {
						%>
						<li class="page-item <%=curPage == i ? "active" : ""%>"><a
							class="page-link"
							href="<%=contentPath%>/article/index.html?page=<%=i%>"><%=i%></a></li>
						<%
							}
						%>
						<li class="page-item"><a class="page-link"
							href="<%=contentPath%>/article/index.html?page=<%=curPage == pages ? pages : curPage + 1%>">下一页</a></li>
					</ul>
				</nav>
			</div>
			<div class="col-2"></div>
		</div>
		<%
			}
		%>
		<div class="row" style="margin: 20px 0px;">
			<div class="col">
				<p class="text-center">&copy;2018&nbsp;&nbsp;&nbsp;重庆信息技术职业学院&nbsp;&nbsp;&nbsp;软件学院&nbsp;&nbsp;&nbsp;软件开发教研室&nbsp;&nbsp;&nbsp;唐礼飞</p>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		function del(){
			id=$(this).attr("id");
			$.ajax({
				url:"<%=contentPath%>/app/data/dictionary/management.html?type=ArticleType&m=del&id="+id,
				type:"GET",
				dataType:"json",
				success:function(result){
					if(result.code===0){
						//更改界面，从表格中删除对应的记录
						//你删除的是哪一行
						//获取你删除的行，从页面上移除
						//$("#"+id).remove();
						$("#articleTypeTable tbody").empty();
						//AJAX重新获取数据，重新显示
						$.get(
								"<%=contentPath%>/app/data/dictionary/management.html?type=ArticleType&m=list",
								function(result){
									if(result.code===0){
										console.log(result);
										console.log(result.data);
										$("#articleTypeTable").append(result.data);	
										$("#articleTypeTable a").bind("click",del);
									}else{
										alert(result.message);
									}
								},
								"json"
						);
					}
					alert(result.message);
				},
				error:function(){
					alert("服务器比较繁忙，请稍候再试......");
				}
			});
		}
		
		$(function(){
			
			$("#articleTypeTable a").bind("click",del);
			
			$("#addArticleType").click(function(){
				var name=$("#articleType").val();
				$.ajax({
					url:"<%=contentPath%>/app/data/dictionary/management.html?type=ArticleType&m=add&name="
													+ name, //请求地址
											type : "GET", //请求的类型(GET或POST)
											//data:, //发送到服务器上的数据
											dataType : "json", //服务器返回数据的格式
											success : function(data) {
												if (data.code === 0) {
													//数据插入成功，更改界面
													$("#articleType").val("");
													index = $(
															"#articleTypeTable tbody")
															.children().length + 1;
													$("#articleTypeTable")
															.prepend(
																	'<tr><td>'
																			+ index
																			+ '</td><td>'
																			+ name
																			+ '</td><td><a id="'+data.data+'" class="btn btn-danger"><i class="far fa-trash-alt"></i></a></td></tr>');

													$("#articleTypeTable a")
															.bind("click", del);
												}
												alert(data.message);
											}, //AJAX请求执行成功后的回调处理函数
											error : processError
										//AJAX请求执行失败的回调处理函数
										});
							});

			function processError() {
				alert("系统错误，请与系统管理员联系！");
			}
		});
	</script>
</body>
</html>